<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">

	#file{
		display: none;
	}
	
</style>


<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script type="text/javascript">
	
	$( document ).ready( function(){
		
		var $file = $( "#file" );
		var $file_info = $( "#span_file_info" );
		var form = $( "#form_upload")[0];
		var xhr2 = new XMLHttpRequest();
		
		
		$file.on( "change", function(){
			$file_info.text( $file[0].files[0].name + " / " + Math.ceil( $file[0].files[0].size/1000 ) + 'kb');
		});
		
		$( "#btn_exe_browse" ).on( "click", function(){
			$file.trigger( "click" );
		});
		
		
		
		$( "#btn_exe_upload" ).on( "click", function(){
			if( $file[0].files.length == 0 ) return;
			var formData = new FormData( );
			formData.append( "file", $file[0].files[0] )
			console.log( form );
			console.log( formData );
			xhr2.open( "POST", "./files/upload_single.php" );
			xhr2.send( formData );
		});
		
		xhr2.onload = function(){
			console.log( "onload" );
		}
		
		xhr2.onerror = function(){
			console.log( "onerror" );
		}
	});
</script>
</head>

<body>
	<form id="form_upload" enctype="multipart/form-data">
		<input type="file" id="file">
		<span id="span_file_info"></span>
		<input type="button" id="btn_exe_browse" value="browse">
		<input type="button" id="btn_exe_upload" value="upload">
	</form>
</body>
</html>